<template>
	<view style="padding-bottom: 60rpx;">
		<view class="headImg" @tap="uploadHead">
			<image src="../../static/images/indexBar/6.png"></image>
		</view>


		<view>

			<view class="inputContent">
				<view class="inputLeft">姓名</view>
				<view class="inputRight">

					<input type="text" placeholder="请填写姓名" placeholder-style="text-align:right" />
				</view>
			</view>

			<view class="inputContent">
				<view class="inputLeft">身份证号</view>

				<view class="inputRight">
					<input type="text" placeholder="请填写身份照号" placeholder-style="text-align:right" />

				</view>
			</view>
			<view class="inputContent">
				<view class="inputLeft">注册手机号</view>
				<view class="inputRight">

					<input type="text" placeholder="请填写手机号" placeholder-style="text-align:right" />

				</view>
			</view>
			<view class="inputContent">
				<view class="inputLeft">服务起止时间</view>
				<view class="inputRight" style="display: flex;" @tap="rangeVisible=true">
					<view>
						{{dates?dates:'请选择日期'}}
					</view>
					<view>
						<image src="../../static/images/rightArrows.png" mode="" style="width:20px;height: 20px;">
						</image>
					</view>
				</view>
			</view>
			<view class="inputContent">
				<view class="inputLeft">服务包进度</view>
				<view class="inputRight" style="display: flex;" @tap="selectorVisible=true">
					<view>
						{{servicePack?servicePack:'请选择服务包'}}
					</view>
					<view>
						<image src="../../static/images/rightArrows.png" mode="" style="width:20px;height: 20px;">
						</image>
					</view>
				</view>
			</view>

			<view class="inputContent1">
				<view class="inputLeft">签名</view>

				<view class="sing">
					<view>
						<view style="text-align: center;">医生签名</view>

						<view style="border: 1rpx solid #CCCCCC;margin-top: 19rpx;">
							<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move'
								@touchstart='start($event)' @touchend='end' @touchcancel='cancel' @longtap='tap'
								disable-scroll='true' @error='error'
								style="height: 150rpx;width: 280rpx;margin: 0 10rpx;">
							</canvas>
						</view>

					</view>
					<view>
						<view style="text-align: center;">居民签名</view>
						<view style="border: 1rpx solid #CCCCCC;;margin-top: 19rpx;">
							<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move'
								@touchstart='start($event)' @touchend='end' @touchcancel='cancel' @longtap='tap'
								disable-scroll='true' @error='error'
								style="height: 150rpx;width: 280rpx;margin: 0 10rpx;">
							</canvas>
						</view>
					</view>
				</view>

				<view class="anewSing" @tap="anewSing">重新签名</view>
			</view>



			<view class="inputContent1" style="border: none;">
				<view class="inputLeft">拍照</view>

				<view class="camera" @tap="uploadImg">

					<view>
						<image src="../../static/images/camera.png" class="cameraImg"></image>

					</view>
					<view class="cameraFont">点击上传</view>
				</view>

			</view>


		</view>
		<view class="btnView">提交</view>

		<w-picker :visible.sync="rangeVisible" mode="range" startYear="2017" endYear="2030" :value="rangeVal"
			:current="true" @confirm="onConfirm($event,'range')" @cancel="onCancel" ref="range"></w-picker>


		<w-picker :visible.sync="selectorVisible" mode="selector" value="服务包1" default-type="name"
			:default-props="defaultProps" :options="selectorList" @confirm="onConfirmPicker($event,'selector')"
			@cancel="onCancelPicker" ref="selector"></w-picker>


	</view>
</template>

<script>
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		},
	})
	export default {
		data() {
			return {
				signImage: '',
				isEnd: false,
				servicePack: '',
				dates: '',
				selectorVisible: false,
				defaultProps: {
					label: "name",
					value: "id"
				},
				selectorList: [{
						name: "服务包1",
						id: "1"
					}, {
						name: "服务包2",
						id: "2"
					},
					{
						name: "服务包3",
						id: "3"
					},
					{
						name: "服务包4",
						id: "4"
					},
					{
						name: "服务包5",
						id: "5"
					}
				],
				rangeVisible: false,

				rangeVal: []
			}
		},
		created() {},

		onLoad() {
			_that = this
			//获得Canvas的上下文
			content = wx.createCanvasContext('firstCanvas')
			//设置线的颜色
			content.setStrokeStyle("#000")
			//设置线的宽度
			content.setLineWidth(5)
			//设置线两端端点样式更加圆润
			content.setLineCap('round')
			//设置两条线连接处更加圆润
			content.setLineJoin('round')

		},
		methods: {

			uploadImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						uni.uploadFile({
							url: this.$uploadFile + '/functions/uploadone',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (uploadFileRes) => {


							},
						});
					}
				});
			},
			uploadHead() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						uni.uploadFile({
							url: this.$uploadFile + '/functions/uploadone',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (uploadFileRes) => {


							},
						});
					}
				});
			},
			anewSing() {
				// 设置为未签名
				this.isEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},



			overSign: function() {
				if (this.isEnd) {
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',

						success: function(res) {
							//打印图片路径
							console.log(res.tempFilePath)
							console.log('完成签名')
							//设置图片
							_that.signImage = res.tempFilePath

						}
					})
				} else {
					uni.showToast({
						title: '请先完成签名',
						icon: "none",
						duration: 1500,
						mask: true
					})
				}

			},

			// 画布的触摸移动开始手势响应
			start: function(event) {
				// console.log(event)
				console.log("触摸开始" + event.changedTouches[0].x)
				console.log("触摸开始" + event.changedTouches[0].y)
				//获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);

			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},

			// 画布的触摸移动结束手势响应
			end: function(e) {
				console.log("触摸结束" + e)
				// 设置为已经签名
				this.isEnd = true
				// 清空轨迹数组
				for (let i = 0; i < touchs.length; i++) {
					touchs.pop()
				}

				if (this.isEnd) {
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						success: function(res) {
							//打印图片路径
							console.log(res.tempFilePath)
							console.log('完成签名')
							//设置图片
							_that.signImage = res.tempFilePath

						}
					})
				}

			},

			// 画布的触摸取消响应
			cancel: function(e) {
				console.log("触摸取消" + e)
			},

			// 画布的长按手势响应
			tap: function(e) {
				console.log("长按手势" + e)
			},

			error: function(e) {
				console.log("画布触摸错误" + e)
			},

			//绘制
			draw: function(touchs) {
				console.log(touchs[0], touchs[1])
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {
				// 设置为未签名
				this.isEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},











			onConfirmPicker(res, type) {
				this.servicePack = res.result;
			},
			onCancelPicker() {

			},
			onConfirm(res, type) {
				this.dates = res.result;
			},
			onCancel() {

			}
		}
	}
</script>

<style lang="scss">
	.btnView {
		width: 670rpx;
		height: 80rpx;
		background: #5396E0;
		border-radius: 40rpx;
		margin: 40rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;








		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;

	}

	.cameraFont {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		margin-left: 13rpx;
		margin-top: -5rpx;
	}

	.camera {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 670rpx;
		height: 170rpx;
		border: 1rpx solid #CCCCCC;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.cameraImg {
		width: 36rpx;
		height: 28rpx;
	}

	.anewSing {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FE0A0A;
		margin-top: 28rpx;
		margin-left: 25rpx;
	}

	.sing {
		display: flex;
		justify-content: space-around;
	}

	.inputLeft {
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.inputRight {

		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #989898;
	}

	.inputContent1 {
		padding: 18rpx 0 38rpx 18rpx;
		border-bottom: 1rpx solid #DCDCDC;
	}

	.inputContent {
		display: flex;
		justify-content: space-between;
		padding: 38rpx 40rpx 38rpx 38rpx;
		border-bottom: 1rpx solid #DCDCDC;
	}

	.headImg {
		display: flex;
		justify-content: center;
		padding-top: 48rpx;
	}

	.headImg image {
		width: 160rpx;
		height: 160rpx;

	}
</style>
